<template>
  <div class="left-menu-items">
    <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" :router="true" active-text-color="#8172d5"
      :collapse="false">
      <el-menu-item index="home_map" @click="homeAndRealVideoClick">
        <img src="~assets/imgHome/leftMenueImg/unactivityHome11054.png" alt="" />
        <span slot="title">首页</span>
      </el-menu-item>
      <!-- 内嵌 -->
      <el-menu-item index="cockpit" v-show="role != '7' && role != '8' ? true : false">
        <img src="~assets/imgHome/leftMenueImg/unactivityDriveRoom1055.png" alt="" />
        <span slot="title">驾驶舱</span>
      </el-menu-item>
      <!-- <el-menu-item index="scene" @click="homeAndRealVideoClick">
        <img src="~assets/imgHome/leftMenueImg/unactivityRealScene11056.png" alt="" />
        <span slot="title">实况展示</span>
      </el-menu-item> -->
      <el-menu-item index="reportMedicalFront" @click="homeAndRealVideoClick">
        <img src="~assets/imgHome/leftMenueImg/report.png" alt="" />
        <span slot="title">报表信息</span>
      </el-menu-item>
      <el-menu-item index="background_manage" v-show="true">
        <img src="~assets/imgHome/leftMenueImg/unactivityBack11057.png" alt="" />
        <span slot="title">后台管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import VueEvent from "utils/event";
export default {
  name: "",
  components: {},
  props: [],
  computed: {
    onRoutes() {
      //获取匹配的el-menu-item组件中index值,设置左边侧边栏高亮显示
      // console.log(this.$route.path.replace("/home", "messageback"))
      // return this.$route.path.replace("/home", "messageback");
      if (this.$route.path.replace("/", "") == "home") {
        return this.$route.path.replace("/home", "home_map");
      } else if (this.$route.path.replace("/", "") == "reportmedicalfk") {
        return this.$route.path.replace("/reportmedicalfk", "reportMedicalFront");
      } else if (this.$route.path.replace("/", "") == "medicalpreportfk") {
        return this.$route.path.replace("/medicalpreportfk", "reportMedicalFront");
      } else {
        return this.$route.path.replace("/", "");
      }
    },
  },
  setup() {
    const state = reactive({
      gridData: [
        {
          id: "medicalReport",
          type: "医疗点报表",
        },
        {
          id: "hospitalReport",
          type: "定点医院报表",
        },
      ],
    });
    var role = ref()
    const homeAndRealVideoClick = () => {
      // console.log(123)
      VueEvent.emit("closeAllEM", false);
    };
    onBeforeMount(() => { });
    onMounted(() => {
      role.value = localStorage.getItem("RoleCode")
      console.log('role.value', role.value)
    });
    const refState = toRefs(state);
    return {
      ...refState,
      role,
      homeAndRealVideoClick,
    };
  },
};
</script>
<style scoped>
/* 菜单项flex布局，并且垂直居中 */
.el-menu {
  background: #181e47;
  border-right: none;
}

.el-menu .el-menu-item,
.fk_report {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 15px;
}

.el-menu .el-menu-item img {
  width: 30px;
  height: 30px;
  color: #fff;
}

.el-menu .el-menu-item span,
.fk_report {
  font-size: 15px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #fff;
}

/* 左侧栏点击移动效果 */
:deep(.el-menu-item:hover) {
  background-color: rgba(129, 114, 213, 0.3);
}

:deep(.el-menu-item.is-active) {
  background: rgba(129, 114, 213, 0.3);
}
</style> 